<template>
  <div id="Register">
    <p class="c-alert">{{stepText}}</p>
    <step1 v-if="step===0"/>
    <step2 v-if="step===1"/>
    <step3 v-if="step===2"/>

    <footer class="c-footer">
      <button class="c-footer__btn" @click="onSubmit">{{step!==2?"下一步":"确定"}}</button>
    </footer>
  </div>

</template>

<script>
  import Step1 from "@/components/logic/register/step1";
  import Step2 from "@/components/logic/register/step2";
  import Step3 from "@/components/logic/register/step3";

  export default {
    name: "Register",
    components: {Step3, Step2, Step1},
    data() {
      return {
        step: 0,
        showPop: false,
        columns: ["手机找回", "邮箱找回"]
      }
    },
    methods: {

      onSubmit() {
        if (++this.step === 3) return wx.navigateBack({delta: 2});
      }
    },
    computed: {
      stepText() {
        switch (this.step) {
          case 0:
            return "第一步：设置账号";
          case 1:
            return "第二步：填写账号资料";
          case 2:
            return "第三步：账号审核"
        }
      }
    },
    onShow() {
      this.step = 0
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../assets/common";

  #Register {
    .c-alert {
      padding: 20px 15px;
      font-weight: bold;
      color: #ed6a0c;
    }
    .c-footer {
      @include absoluteFull(fixed);
      top: auto;
      @include flex-center;
      padding: 20px 0;
      &__btn {
        background: #07c160;
        padding: 10px 0;
        font-size: 18px;
        color: white;
        width: 80%;
      }
    }
  }
</style>
